header {
  width: 100%;
  height: 40px;
  background-color: #333333;
  color: #b0b0b0;
  .header-left {
    float: left;
    a {
      color: #b0b0b0;
      line-height: 40px;
      display: inline-block;
      font-size: 12px;
      &:hover {
        color: white;
        .appcode {
          height: 120px;
          padding: 20px;
        }
        .triangle {
          display: block;
        }
      }
      .triangle {
        position: absolute;
        top: 20px;
        left: 750px;
        z-index: 25;
        border-width: 10px;
        border-style: solid;
        border-color: transparent transparent white transparent;
        display: none;
      }
      .appcode {
        position: absolute;
        top: 40px;
        left: 674px;
        width: 124px;
        height: 0;
        background-color: #fff;
        text-align: center;
        font-size: 14px;
        line-height: 1;
        z-index: 24;
        padding: 0 20px;
        box-shadow: 0 1px 5px #aaa;
        transition: all 0.2s;
        overflow: hidden;
        img {
          display: block;
          margin: 0 auto 12px;
        }
      }
    }
    span {
      margin: 0 0.3em;
      color: #424242;
      font-size: 12px;
    }
  }
  .header-right {
    float: right;
    a {
      color: #b0b0b0;
      line-height: 40px;
      display: inline-block;
      font-size: 12px;
      &:hover {
        color: white;
      }
    }
    span {
      margin: 0 0.3em;
      color: #424242;
      font-size: 12px;
    }
    .shopp {
      height: 40px;
      line-height: 40px;
      width: 100px;
      position: relative;
      .shopp-tit {
        height: 40px;
        line-height: 40px;
        width: 100px;
        background-color: #424242;
        text-align: center;
        i {
          margin-right: 5px;
          vertical-align: middle;
        }
      }
      .trolley {
        position: absolute;
        z-index: 24;
        right: 0;
        top: 40px;
        width: 300px;
        height: 0px;
        background-color: #fff;
        text-align: center;
        box-shadow: 0 2px 10px rgb(0 0 0/15%);
        transition: all 0.2s;
        overflow: hidden;
      }
      &:hover {
        .shopp-tit {
          background-color: white;
          color: #ed712e !important;
        }
        .trolley {
          line-height: 150px;
          height: 150px;
          color: #333333;
        }
      }
    }
  }
}
